<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Delete } from '@element-plus/icons-vue'

interface Notification {
  id: string
  type: 'system' | 'order' | 'activity'
  title: string
  content: string
  time: string
  isRead: boolean
}

const activeFilter = ref<string>('all')

const notifications = ref<Notification[]>([
  {
    id: 'NOTIF001',
    type: 'system',
    title: '系统维护通知',
    content: '系统将于今晚22:00-24:00进行维护升级，期间可能无法访问，请提前做好安排。',
    time: '2025-02-15 10:00:00',
    isRead: false
  },
  {
    id: 'NOTIF002',
    type: 'order',
    title: '订单支付成功',
    content: '您的订单 ORD20250105002 已支付成功，感谢您的购买！',
    time: '2025-02-14 16:30:00',
    isRead: true
  },
  {
    id: 'NOTIF003',
    type: 'activity',
    title: '限时优惠活动',
    content: '春季特惠活动正在进行中，年度会员限时8折优惠，不容错过！',
    time: '2025-02-10 09:00:00',
    isRead: true
  },
  {
    id: 'NOTIF004',
    type: 'system',
    title: '新功能上线',
    content: '个人中心新增收藏功能，快去收藏您感兴趣的招考信息吧~',
    time: '2025-02-05 14:20:00',
    isRead: false
  },
  {
    id: 'NOTIF005',
    type: 'order',
    title: '订单完成通知',
    content: '您的订单 ORD20250101001 已完成，欢迎再次光临！',
    time: '2025-02-01 11:15:00',
    isRead: true
  }
])

const filteredNotifications = ref<Notification[]>([])

const updateFilteredNotifications = () => {
  if (activeFilter.value === 'all') {
    filteredNotifications.value = notifications.value
  } else {
    filteredNotifications.value = notifications.value.filter(
      notif => notif.type === activeFilter.value
    )
  }
}

updateFilteredNotifications()

const handleFilterChange = (filter: string) => {
  activeFilter.value = filter
  updateFilteredNotifications()
}

const getTypeText = (type: string): string => {
  const typeMap: Record<string, string> = {
    system: '系统通知',
    order: '订单消息',
    activity: '活动消息'
  }
  return typeMap[type] || type
}

const getTypeColor = (type: string): string => {
  const colorMap: Record<string, string> = {
    system: '#4facfe',
    order: '#7ee8fa',
    activity: '#ffd700'
  }
  return colorMap[type] || '#4facfe'
}

const handleMarkAsRead = (notification: Notification) => {
  notification.isRead = true
  ElMessage.success('已标记为已读')
}

const handleDelete = (notification: Notification) => {
  const index = notifications.value.findIndex(n => n.id === notification.id)
  if (index > -1) {
    notifications.value.splice(index, 1)
    updateFilteredNotifications()
    ElMessage.success('已删除该消息')
  }
}

const handleMarkAllAsRead = () => {
  notifications.value.forEach(n => n.isRead = true)
  ElMessage.success('已全部标记为已读')
}

const unreadCount = ref(
  notifications.value.filter(n => !n.isRead).length
)
</script>

<template>
  <div class="notification-list">
    <div class="list-header">
      <div>
        <h3 class="list-title">通知消息</h3>
        <p class="list-desc">
          共 {{ notifications.length }} 条消息，未读 {{ unreadCount }} 条
        </p>
      </div>
      <el-button
        v-if="unreadCount > 0"
        type="primary"
        plain
        size="default"
        @click="handleMarkAllAsRead"
      >
        全部已读
      </el-button>
    </div>

    <!-- 消息类型筛选 -->
    <div class="filter-tabs">
      <div
        class="filter-item"
        :class="{ active: activeFilter === 'all' }"
        @click="handleFilterChange('all')"
      >
        全部消息
      </div>
      <div
        class="filter-item"
        :class="{ active: activeFilter === 'system' }"
        @click="handleFilterChange('system')"
      >
        系统通知
      </div>
      <div
        class="filter-item"
        :class="{ active: activeFilter === 'order' }"
        @click="handleFilterChange('order')"
      >
        订单消息
      </div>
      <div
        class="filter-item"
        :class="{ active: activeFilter === 'activity' }"
        @click="handleFilterChange('activity')"
      >
        活动消息
      </div>
    </div>

    <!-- 消息列表 -->
    <div class="notification-cards">
      <div v-if="filteredNotifications.length === 0" class="empty-state">
        <div class="empty-icon">🔔</div>
        <div class="empty-text">暂无消息</div>
      </div>

      <div
        v-for="notification in filteredNotifications"
        :key="notification.id"
        class="notification-card"
        :class="{ unread: !notification.isRead }"
      >
        <div class="card-indicator" v-if="!notification.isRead"></div>

        <div class="card-header">
          <span
            class="type-badge"
            :style="{ backgroundColor: getTypeColor(notification.type) }"
          >
            {{ getTypeText(notification.type) }}
          </span>
          <span class="notification-time">{{ notification.time }}</span>
        </div>

        <div class="card-body">
          <h4 class="notification-title">{{ notification.title }}</h4>
          <p class="notification-content">{{ notification.content }}</p>
        </div>

        <div class="card-footer">
          <el-button
            v-if="!notification.isRead"
            type="primary"
            plain
            size="small"
            @click="handleMarkAsRead(notification)"
          >
            标记已读
          </el-button>
          <el-button
            :icon="Delete"
            type="danger"
            plain
            size="small"
            @click="handleDelete(notification)"
          >
            删除
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.notification-list {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 16px rgba(79, 172, 254, 0.1);
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f9ff;
}

.list-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.list-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

/* 筛选标签 */
.filter-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.filter-item {
  padding: 10px 24px;
  border-radius: 24px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  background: #f5f5f5;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-item:hover {
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%);
  color: var(--primary-color);
}

.filter-item.active {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(79, 172, 254, 0.25);
}

/* 消息卡片 */
.notification-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-text {
  font-size: 16px;
  color: var(--text-secondary);
}

.notification-card {
  position: relative;
  background: #ffffff;
  border: 2px solid #f0f0f0;
  border-radius: 12px;
  padding: 20px;
  padding-left: 28px;
  transition: all 0.3s ease;
}

.notification-card.unread {
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.03) 0%, rgba(0, 242, 254, 0.03) 100%);
  border-color: rgba(79, 172, 254, 0.3);
}

.notification-card:hover {
  border-color: var(--primary-color);
  box-shadow: 0 4px 16px rgba(79, 172, 254, 0.15);
  transform: translateY(-2px);
}

.card-indicator {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: #ff6b6b;
  border-radius: 50%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.type-badge {
  padding: 4px 12px;
  border-radius: 12px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
}

.notification-time {
  font-size: 13px;
  color: var(--text-secondary);
}

.card-body {
  margin-bottom: 16px;
}

.notification-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.notification-content {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.card-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .notification-list {
    padding: 20px;
  }

  .list-header {
    flex-direction: column;
    gap: 16px;
  }

  .list-header .el-button {
    width: 100%;
  }

  .card-footer {
    flex-direction: column;
  }

  .card-footer .el-button {
    width: 100%;
  }
}
</style>
